
$(function(){
	// 定义一个全局变量来存储 Cropper 实例
	let globalCropper = null;
	
	$(function(){
	    $("#quimg,#cha").click(function(){
	        $("#updateimg").css("display","none");
	        // 关闭修改头像框时销毁 Cropper 实例
	        if (globalCropper) {
	            globalCropper.destroy();
	            globalCropper = null;
	        }
	    });
	});
	
	layui.use(function(){
	    var upload = layui.upload;
	    var layer = layui.layer;
	    var element = layui.element;
	    var $ = layui.$;
	
	    // 单图片上传
	    var uploadInst = upload.render({
	        elem: '#upimg',
	        url:'',
	        before: function(obj){
	            // 预读本地文件示例，不支持ie8
	            obj.preview(function(index, file, result){
	                $("#updateimg").css("display","block");
	                $('#headimg').attr('src', result); // 图片链接（base64）
	                // 销毁旧的 Cropper 实例
	                if (globalCropper) {
	                    globalCropper.destroy();
	                }
	
	                // 开始裁剪
	                globalCropper = crop();
	                globalCropper.replace(result, false);
	            });
	        }
	    });
		
		
		$("#save").click(function(){
			//获取裁剪后的图片数据
			var cropCanvas=globalCropper.getCroppedCanvas();
			//将裁剪后的图片转换为base64格式
			var croppedimage=cropCanvas.toDataURL("image/jpeg")
			let file=base64toFile(croppedimage)
			let fileData = new FormData();
			fileData.append('file', file); // 'file'为后端接收的字段名
			let userid=window.localStorage.getItem("userid");
			    axios.post(API+"updateImg",fileData,{headers: {
					//'Authorization': 'Bearer your_token',
					}}).then(res=>{
			    	console.log(res)
					//保存图片地址
					axios.post(API+"saveImg?frilmsg="+res.data.frilmsg+"&userid="+userid).then(res=>{
						if(res.data>0){
							layer.alert('修改成功')
						}else{
							layer.alert('修改头像失败')
						}
					})
			    })
			$("#updateimg").css("display","none");
			$('#upimg').attr('src', croppedimage);
		})
	
	    var uploadInst = upload.render({
	        elem: '#iocntu',
	        url:'#',
	        before: function(obj){
	            // 预读本地文件示例，不支持ie8
	            obj.preview(function(index, file, result){
	                $("#updateimg").css("display","block");
	                $('#headimg').attr('src', result); // 图片链接（base64）
	                // 销毁旧的 Cropper 实例
	                if (globalCropper) {
	                    globalCropper.destroy();
	                }
	
	                // 开始裁剪
	                globalCropper = crop();
	                globalCropper.replace(result, false);
	            });
	        }
	    });
	});
	
	function crop(){
	    var headimg = document.getElementById("headimg");
	    // 创建 cropper 对象
	    const cropper = new Cropper(headimg, {
	        // 裁剪框比例
	        // NaN 表示任意比例
	        aspectRatio: 1/1,
	        // 视图模式
	        viewMode: 3,
	        // 开启预览效果
	        preview: '#xiaohead',
	        // 拖拽模式
	        dragMode: 'move',
	        reaponsive: true,
	        // 检查图片是否跨域
	        checkCrossOrigin: true,
	        // 是否显示裁剪的虚线
	        guides: false,
	        // 当初始化的时候，是否自动显示裁剪框
	        autoCrop: true,
	        // 当初始化时，裁剪框的大小与原图比例
	        autoCropArea: 1,
	        // 是否移动裁剪框
	        cropBoxMovable: false,
	        // 是否可以调节裁剪框的大小
	        cropBoxResizable: false,
	    });
	    return cropper;
	}
	
	
	// 第一个参数dataUrl是一个base64的字符串。第二个参数是文件名可以随意命名
	function base64toFile(dataurl, filename = 'file') {
	  let arr = dataurl.split(',');
	  let mime = arr[0].match(/:(.*?);/)[1];
	  // suffix是该文件的后缀
	  let suffix = mime.split('/')[1];
	  // atob 对经过 base-64 编码的字符串进行解码
	  let bstr = atob(arr[1]);
	  // n 是解码后的长度
	  let n = bstr.length;
	  // Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
	  let u8arr = new Uint8Array(n);
	  // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
	  while (n--) {
	    u8arr[n] = bstr.charCodeAt(n);
	  }
	  // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
	  // 第三个参数是 要放到文件中的内容的 MIME 类型
	  return new File([u8arr], `${filename}.${suffix}`, {
	    type: mime,
	  });
	}

})